import chart from '@/utils/chart.js'
import {toYYYYMMDD,  toHHMM, msToHHMMSS, toMMDD,  formatTimeStamp} from '@/utils/timeUtil'
import { parseNumFloat } from '@/utils/tool'
import { ONE_DAY_MS } from '@/consts/consts.js'
import { format } from 'silly-datetime'
export default (chartData, time_start, time_end, isOneDay, key, tit) => {
  const isArea = true
  let yMin = 0
  let yMax = 100
  let style = chart.styleConfig('#70C3EF', 'solid', isArea)

  let o = {
    data: [],
    name: tit,
    
    ...chart.ECHART_LINE_CONFIG_BIG_DATA,
    ...style
  }

  for (let data of chartData) {
    o.data.push([
      +new Date(data.upload),
      data[key]
    ])
  }

  let series = [o]

  let xInterval = Math.ceil((time_end - time_start) / (24 * 3600 * 1000))
  let xAxisConfig = null
  // 选择 一天 的x轴config
  if (isOneDay) {
    xAxisConfig = {
      splitLine: {
        show: false
      },
      type: 'time',
      maxInterval: 1 * 3600 * 1000,
      min: function (value) {
        let todayStart = new Date(
          new Date(value.min).toLocaleDateString()
        ).getTime()
        return todayStart
      },
      max: function (value) {
        let todayStart = new Date(
          new Date(value.min).toLocaleDateString()
        ).getTime()
        let todayEnd = todayStart + ONE_DAY_MS
        return todayEnd
      },
      axisLabel: {
        show: true,
        color: '#c3c6cd',
        rotate: 30,
        formatter: (value, index) => {
          let t = toHHMM(new Date(value).getTime())
          return `${t}`
        }
      }
    }
  } else {
    // 选择 多天 的x轴config
    xAxisConfig = {
      splitLine: {
        show: false
      },
      type: 'time',
      maxInterval: xInterval * 3600 * 6 * 1000,
      min: function (value) {
        let todayStart = value.min
        return todayStart
      },
      max: function (value) {
        let dayEnd = value.max
        return dayEnd
      },
      axisLabel: {
        show: true,
        color: '#c3c6cd',
        rotate: 0,
        formatter: (value, index) => {
          let d = toMMDD(new Date(value).getTime())
          let t = toHHMM(new Date(value).getTime())
          return `${d} ${t}`
        },
      }
    }
  }

  let option = {
    legend: {
      data: [tit],
      show: true,
      top: '1%',
      right: '4%',
      itemGap: 19,
      itemWidth: 12,
      itemHeight: 12
    },
    grid: {
      top:'45',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      ...chart.TOOLTIP,
      formatter: (params, ticket) => {
        let s = ''
        s = s + formatTimeStamp(params[0].axisValue) + `</br>`

        for (let item of params) {
          let unit = '%'
          let [t, y] = item.value
          s += `<span style="color:${item.color}">
                  <span class="tooltip-m">${item.seriesName}: </span>${parseNumFloat(y)}${unit}</span></br>`
        }
      
        return s
      }
    },
    dataZoom: [{
      type: 'inside',
      throttle: 50
    }],
    xAxis: {
      ...xAxisConfig,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#6E798B'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      name: '       ',
      type: 'value',
      ...chart.AXIS_STYLE,
      min: yMin,
      max: yMax
    },
    series
  }
  return option
}
